<template>      

    <div class="total">
    <!-- 角色信息栏 -->
    <div class="topmenu" style=" padding: 50px 20px 50px 160px;">
      <div class="column">
        <img src="../assets/logo.svg" alt="用户图像">
      </div>
      <div class="column">
        <h3>管理员（超级管理员）</h3>
        <p>部门：管理员</p>
      </div>
    </div>
    <!-- 联系信息栏 -->
    <div class="message" style="padding: 25px 280px 10px;">
      <span>
        <h4>联系方式</h4>
        <form action="/" method="get">
          <label for="phone">手机</label>
          <input type="number" id="phone" name="phone" required>
        </form>
        <form action="/" method="get">
          <label for="tel">座机</label>
          <input type="number" id="tel" name="tel" required>
        </form>
        <form action="/" method="get">
          <label for="mail">邮箱</label>
          <input type="text" id="mail" name="mail" required>
        </form>
      </span>
      <span>
        <button>编辑</button>
        <button>取消</button>
        <button>保存</button>
      </span>
    </div>
    <!-- 分隔栏 -->
    <hr>
    <!-- 安全设置栏 -->
    <div class="password" style="padding: 25px 280px 10px;">
      <span>
        <h4>安全设置</h4>
        <form action="/" method="get">
          <label for="oldPassword">手机</label>
          <input type="password" id="oldPassword" name="oldPassword" required>
        </form>
        <form action="/" method="get">
          <label for="newPassword">座机</label>
          <input type="password" id="newPassword" name="newPassword" required>
        </form>
        <form action="/" method="get">
          <label for="confirmPassword">邮箱</label>
          <input type="password" id="confirmPassword" name="confirmPassword" required>
        </form>
      </span>
      <span>
        <button>修改</button>
        <button>取消</button>
        <button>保存</button>
      </span>
    </div>
    <!-- 分隔栏 -->
    <hr>
    <!-- 自定义标题栏 -->
    <div class="select" style="padding: 25px 280px 10px;">
      <span>
        <h4>自定义标题</h4>
        <label for="titleName">标题名称:</label>
        <select id="titleName" name="titleName">
          <option value="zrzy">湖南省自然资源与地理空间一张图</option>
          <option value="hbdc">湖南省环保督察一张图</option>
          <option value="fxjc">湖南省分析决策一张图</option>
          <option value="dcjc">湖南省调查监测一张图</option>
          <option value="qqdj">湖南省确权登记一张图</option>
          <option value="zydc">湖南省资源调查一张图</option>
          <option value="kfly">湖南省开发利用一张图</option>
          <option value="kjgh">湖南省空间规划一张图</option>
          <option value="ytgz">湖南省用途管制一张图</option>
          <option value="stxf">湖南省生态修复一张图</option>
          <option value="gdbh">湖南省耕地保护一张图</option>
          <option value="dkgl">湖南省地勘管理一张图</option>
          <option value="dzgl">湖南省地灾管理一张图</option>
          <option value="kqgl">湖南省矿权管理一张图</option>
          <option value="kcbh">湖南省矿产保护一张图</option>
          <option value="dxgl">湖南省地信管理一张图</option>
          <option value="dczf">湖南省督察执法一张图</option>
          <option value="xmgl">湖南省项目管理一张图</option>
          <option value="szyjcdc">湖南省水资源基础调查一张图</option>
        </select>
      </span>
      <span>
        <button>编辑</button>
        <button>取消</button>
        <button>保存</button>
      </span>
    </div>
  </div>
</template>
<script>
import { emitter } from "../utils/eventBus";
export default {            
    name: 'Login',
    data(){
        return{}
    },
    mounted(){
        emitter.emit('Showheader', true);
    },
    methods(){

    },


    
}               
</script>
<style lang="scss" scoped>




    .total {
      background-color: #ffffff;

    }

    /* 设置分隔线的格式 */

    hr {
      border: 1px dashed #d2d4d7;
      margin: 0px 160px;
    }

    /* 设置分隔线的格式 */


    .column {
      float: left;
      padding: 15px;

    }

    .topmenu::after {
      content: "";
      clear: both;
      display: table;


    }

    .topmenu {
      background-color: #ebf0fb;
      border-bottom: 1px solid #d2d4d7;

    }


    .column img {

      border-radius: 50%;
      width: 124px;
      /* 设置图像宽度 */
      height: 124px;
      /* 设置图像高度 */
      border-radius: 50%;
      /* 将图像变为圆形 */
      object-fit: cover;
      /* 保持图像比例，防止变形 */
      position: relative;
      box-shadow: 0 0 0 5px #ffffff, 0 0 0 15px #ebeef5, 0 0 0 20px #65a2ff;


    }

    .column h3 {
      margin: 24px 20px 20px 0px;
      font: 24px sans-serif;
      font-weight: bold;
    }

    .column p {

      font: 16px sans-serif;
    }
</style>